<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/7/3
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.7.0
  -->

<template>
  <transition name="fade">
    <el-container class="SlidingPanel" v-show="Show">
      <el-button
        icon="el-icon-error"
        @click="ClosePanel"
        :key="1"
        v-show="Show"
      />

      <div
        :style="PanelStyle"
        :class="CustomClass"
        v-show="Show"
        style="z-index: 200;"
      >
        <div class="wrap-with-halfboder"></div>
        <slot />
      </div>
      <border-warp style="pointer-events: none;z-index: 100;width: 100%;">
        <div style="width: 100%;height: 100%;pointer-events: none;"></div>
      </border-warp>
    </el-container>
  </transition>
</template>

<script>
/**
 * 侧滑面板
 */
export default {
  name: "SliderPanel",
  props: {
    Show: { required: true, default: false }, //是否显示面板(默认不显示)
    Direction: { type: String, default: "bottoptom" }, //展示方向(默认向左)
    Width: { type: [Number, String], default: 800 }, //面板宽度(默认500像素)
    Height: { type: [Number, String], default: 500 }, //面板高度(默认500像素)
    CustomClass: { type: String, default: "" }, //面板默认样式
    Offset: { default: 30 } //全屏时空隙
  },
  data() {
    return {
      PanelStyle: {}, //面板样式(定义位置)
      CloseBtnStyle: {} //面板样式(定义位置)
    };
  },
  methods: {
    ClosePanel() {
      //当面板关闭(点击关闭按钮)
      this.$emit("update:Show", false);
    }
  },
  mounted() {
    //组件加载时
    let OffsetLeft =
      typeof this.Width === "number" ? `${this.Width}px` : this.Width;
    let OffsetRight =
      typeof this.Width === "number" ? `${this.Height}px` : this.Height;
    switch (
      this.Direction //判断面板展示方向
    ) {
      case "left": //向左
        this.PanelStyle = Object.assign(
          { left: "auto", width: OffsetLeft },
          OffsetLeft === "100%"
            ? {
                marginRight: `-${this.Offset}px`,
                paddingRight: `${this.Offset}px`
              }
            : {}
        );
        this.CloseBtnStyle = Object.assign(
          { right: OffsetLeft },
          OffsetLeft === "100%" ? { marginRight: `-${this.Offset}px` } : {}
        );
        break;
      case "right": //向右
        this.PanelStyle = { right: "auto", width: OffsetLeft };
        this.CloseBtnStyle = { left: OffsetLeft };
        break;
      case "top": //向上
        // this.PanelStyle = { top: "10vh", height: OffsetRight };
        this.CloseBtnStyle = { bottom: OffsetRight, right: 0 };
        break;
      case "bottom": //向下
        this.PanelStyle = { bottom: "auto", height: OffsetRight };
        this.CloseBtnStyle = { top: OffsetRight, right: 0 };
        break;
    }
  }
};
</script>

<style lang="scss">
.fade-enter-active {
  transition: opacity 0.3s;
}
.fade-leave-active {
  transition: opacity 0.1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.SlidingPanel {
  width: 40vw;
  position: fixed;
  top: 5vh;
  left: 30vw;
  bottom: 5vh;
  background-color: rgba(7, 16, 24, 0.7);
  z-index: 1006;

  /deep/ .el-form-item__label {
    color: #fff;
    background: url("~@/assets/layout/borderTitle.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 400px;
    padding-left: 20px !important;
    background-position-y: 6px;
    text-align: left;
    // line-height: 41px;
    margin-bottom: 6px;
  }
}

.SlidingPanel > div {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.SlidingPanel > button {
  z-index: 1007;
  min-width: 45px;
  height: 45px;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 0 0 0 50%;
  border: none;
  font-size: 20px;
  color: #999;
  padding: 0;
  background: #0a4ebc;
  i {
    color: #fff;
    position: relative;
    left: 2px;
    top: -2px;
    font-size: 26px;
  }
  &:hover {
    background: #3a71a8;
    transition: ease 0.3s;
  }
}
</style>
